<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .one {
        color: pink;
      }
    </style>
  </head>
  <body>
    <!-- 1. 定义一个根标签,未来用来插入动态创建的dom对象 -->
    <div id="root"></div>
    <!-- 2. 引入react和react-dom-->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <!-- 3. 根据数据,动态的插件虚拟dom -->
    <!-- type="text/babel" 是告诉babel这个里面的代码需要被编译 -->
    <script type="text/babel">
      // function handle(){

      // }
      //   4. 让react帮我们将虚拟dom创建成真实dom,并渲染到页面
      const div = (
        <div>
          {/*直接在标签上绑定,事件名和dom阶段学习的事件名完全一样.但是事件名首字母要大写*/}
          <h1
            className="one"
            onClick={function fn(e) {
              // e.persist()
              // 这是e不是dom阶段的事件对象,是react中封装的合成事件
              // 合成事件就是对dom的事件对象的包装.解决dom中事件对象兼容性问题
              // 使用和dom中事件对象一模一样
              // console.log('click', e.target)
              // console.log('click', e)
              // this指向undefined的原因: 1.我们写的这个fn函数,其实不是真正的事件处理函数.react底层是利用apply调用了fn.并在第一个参数传入了undefined.所以导致我们fn中的this应该指向window. 2. 但是我们的代码又要被babel编译.babel编译之后,会开启严格模式.严格模式下,this不允许指向window.所以最终指向了undefined
              console.log(this) //undefined
            }}
            // onMouseEnter={function () {
            //   console.log('mouseenter')
            // }}
          >
            嘿嘿嘿
          </h1>
          <a
            href=""
            onClick={function (e) {
              // e.preventDefault()
              console.log('xxxxxxxx')
              // return false 无效. 因为我们写的函数其实不是真正的事件处理函数.return false必须写在真正的事件处理函数中才会生效
            }}
          >
            导航
          </a>
        </div>
      )
      ReactDOM.render(div, document.getElementById('root'))

      // react源码的伪代码:
      // h1的真实dom.addEventListener('click', function () {
      //   我们定义的fn.apply(undefined)
      // return false
      // })
    </script>
  </body>
</html>
